<template>
	<div class="content">
		<h2><i class="iconfont icon-shangjia"></i>添加管理员</h2>
		<div class="content-wrap">
			<div class="ct-left">
				<div class="list">
					<div class="title">管理员名称</div>
					<div class="ipt">
						<el-input size="small" v-model="params.username"></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">密&nbsp;&nbsp;码</div>
					<div class="ipt">
						<el-input size="small" type="password" v-model="params.password" ></el-input>
					</div>
				</div>
				<div class="list">
					<div class="title">重复密码</div>
					<div class="ipt">
						<el-input size="small" type="password" v-model="password2"></el-input>
					</div>
				</div>
			</div>
			<div class="ct-right">
				<div class="list">
					<div class="title">角色列表</div>
					<div>
						<el-transfer 
							:props="props"
							:data="permissionData"
							filterable
							filter-placeholder="搜索角色"
							v-model="params.selectPermissions"
							:button-texts="['删除角色', '添加角色']"
							:titles="['所有角色', '已分配角色']">
						</el-transfer>
					</div>
				</div>
				<div class="submit">
					<el-button type="success" @click="addAdmin">添加管理员</el-button>
				</div>
				
			</div>
			
		</div>
		<!---->
	</div>
</template>

<script>
	
	//import data from "../../../static/json/permissions.json"
	export default {
		created() {
			this.fetchAllActor();
		},
		data() {
			return {
				params: {
					selectPermissions: [],				//用户权限
					username: "",						//用户名
					password: "",						//密码
				},
				props: {
					key: "group_id",
					label: "group_name",
				},
				permissionData: [],//后台获取的所有权限
				password2: "",//重复密码
				loading: false,//图片加载小圆圈
			};
		},
		methods: {
			//获取所有角色
			fetchAllActor() {
				var url = `${this.url}/auth/user_get_manager_group.action`;
				this.$http.get(url).then((res) => {
					if( res.data.success ) {
						this.permissionData = res.data.result.rows;
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			//添加一个管理员
			addAdmin() {
				const username = this.params.username;
				const password = this.params.password;
				const password2 = this.password2;
				const description = this.params.description;
				const avatar = this.params.avatar;
				const permissions = this.params.selectPermissions;					
				if (username.replace(/\s/g, "") === "") {
					this.$message({
						type: "warning",
						message: "用户名不允许为空"
					});
					return;
				}else if (password.length < 6) {
					this.$message({
						type: "warning",
						message: "密码长度不能小于6位"
					});
					return;
				}else if(password !== password2) {
					this.$message({
						type: "warning",
						message: "两次输入的密码不一致"
					});
					return;
				}else if (permissions.length === 0) {
					this.$message({
						type: "warning",
						message: "请至少给管理员分配一个权限"
					});
					return;
				}		
				var url = `${this.url}/auth/user_add_manager.action`;
				var params = {
					user_name: this.params.username,
					user_pwd: this.params.password,
					ids: this.params.selectPermissions.join(",")
				}
				this.$http.get(url, { params }).then((res) => {
					if( res.data.success ) {
						this.params.selectPermissions = [];
						this.params.username = "";
						this.params.password = "";
						this.password2 = "";
						this.$message({
							type: "success",
							message: "添加管理员成功"
						});
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 87%;
		background: #f2f2f2;
		>h2 {
			background: #f9f9f9;
			border-bottom: 1px solid #ccc;
			padding: 10px 0;
			font-weight: normal;
			text-indent: 3rem;
			font-size: 1.3rem;
			color: #555;
			i {
				margin-right: 1rem;
			}
		}
	}
	/*内容区域*/
	.content-wrap {
		display: flex;
		.list {
			.title {
				color: #008489;
				font-size: 16px;
				margin: 1rem 0;
			}
			.ipt {
				width: 300px;
			}
			.tip {
				float: left;
				margin-left: 20px;
				color: #666;
				li {
					margin-bottom: 20px;
				}
			}
		}
	}
	/*填写用户基本信息*/
	.ct-left {
		flex: 0 0 40%;
		border-right: 1px solid #aaa;
		padding: 2rem;
		.upload {
			border: 1px dotted #ccc;
			border-radius: 5px;
		}
		.upload:hover {
			border: 1px dotted #2cf;
		}
		.avator {
			width: 130px;
			height: 130px;
		}
		.avatar-uploader-icon {
			font-size: 30px;
			color: #999;
			width: 130px;
			height: 130px;
			line-height: 130px;
			text-align: center;
		}
	}
	/*给用户分配权限*/
	.ct-right {
		flex: 0 0 60%;
		padding: 2rem;
		.submit {
			margin-top: 30px;
			text-align: center;
		}
		.el-transfer-panel__body {
			height: 400px;		
		}
		.el-transfer-panel__list.is-filterable {
			height: 400px;
		}
	}
	
	
	
	/*每一项的基本信息填写*/


</style>